<template>
  <div class="hello">
    <el-container v-loading="loading" element-loading-text="模板加载中">
      <el-header>
        <span class="title">{{ tem_name || "模板设计" }}</span>
        <el-button @click="close">关闭</el-button>
        <el-button @click="saveTemplate">保存</el-button>
      </el-header>
      <el-main>
        <div class="left">
          <div
            class="main"
            :style="{ width: page.width + 'mm', height: page.height + 'mm' }"
          >
            <newDrag
              :goodslistProps="goodslistProps"
              :qrcodelistProps="qrcodelistProps"
              :sublineProps="sublineProps"
              :key="timer"
              ref="newDrag"
            ></newDrag>
          </div>
        </div>
        <div class="right">
          <div class="item">
            <div class="item-title">
              <i class="el-icon-setting"></i>
              设置
            </div>
            <div class="item-main page">
              <ul>
                <li>
                  <span class="page-item-title">上边距:</span>
                  <div class="page-item-content">
                    <el-input
                      placeholder="请输入内容"
                      size="mini"
                      v-model="page.topMargin"
                      style="width: 150px"
                    ></el-input>
                  </div>
                  <span class="page-item-title">左边距:</span>
                  <div class="page-item-content">
                    <el-input
                      placeholder="请输入内容"
                      size="mini"
                      v-model="page.leftMargin"
                      style="width: 150px"
                    ></el-input>
                  </div>
                </li>
                <li>
                  <span class="page-item-title">建议尺寸:</span>
                  <span style="font-size: 18px">60*40</span>
                  <span style="font-size: 10px; padding-left: 10px; color: red"
                    >提示：其他尺寸请手动设置宽、高！</span
                  >
                </li>
                <li>
                  <span class="page-item-title"
                    >纸张宽度<el-tooltip
                      class="item"
                      effect="dark"
                      content="自定义打印纸张的大小，请谨慎修改"
                      placement="top-start"
                    >
                      <i class="el-icon-question"></i> </el-tooltip
                    >:</span
                  >
                  <div class="page-item-content">
                    <el-input
                      placeholder="请输入内容"
                      size="mini"
                      v-model="page.width"
                      style="width: 120px"
                    ></el-input>
                  </div>
                  <span class="page-item-title">纸张高度:</span>
                  <div class="page-item-content">
                    <el-input
                      placeholder="请输入内容"
                      size="mini"
                      v-model="page.height"
                      style="width: 150px"
                    ></el-input>
                  </div>
                </li>
                <li>
                  <span class="page-item-title"
                    >打印预览<el-tooltip
                      class="item"
                      effect="dark"
                      content="默认关闭，开启后每次打印则会先预览样式。"
                      placement="top-start"
                    >
                      <i class="el-icon-question"></i>:</el-tooltip
                    ></span
                  >
                  <div class="page-item-content">
                    <el-checkbox v-model="page.isShow"></el-checkbox>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 商品信息 -->
          <div class="item">
            <div class="item-title">
              <i class="el-icon-setting"></i>
              小票信息
            </div>
            <div class="item-main main-info">
              <div>
                <el-checkbox-group v-model="goodsType" @change="selectMethod">
                  <el-checkbox
                    v-for="item in goodsMenuList"
                    :key="item.index"
                    :label="item.index"
                    border
                    size="mini"
                    >{{ item.label }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>

              <FontSet
                :fontset="goodsFontSet"
                :fontOptions="fontOptions"
                @getdata="(data) => getdata(data, 'goods')"
              ></FontSet>
            </div>
          </div>
          <!-- 二维码  -->
          <div class="item">
            <div class="item-title">
              <i class="el-icon-setting"></i>
              条码信息
            </div>
            <div class="item-main main-info">
              <div>
                <el-checkbox-group v-model="qrcodeType">
                  <el-checkbox
                    v-for="item in qrcodeList"
                    :key="item.index"
                    :label="item.index"
                    border
                    size="mini"
                    >{{ item.label }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
            </div>
          </div>
          <!-- 辅助线 -->
          <div class="item">
            <div class="item-title">
              <i class="el-icon-setting"></i>
              辅助线(建议1像素)
            </div>
            <div class="item-main main-info">
              <div class="subline_form">
                <el-form
                  :inline="true"
                  :model="subline_form"
                  class="demo-form-inline"
                  ref="userListFrom"
                  label-width="40px"
                >
                  <el-form-item label="线型" prop="line_type">
                    <el-select
                      v-model.trim="subline_form.line_type"
                      placeholder="线型"
                      class="wid70"
                    >
                      <el-option label="实线" value="1"></el-option>
                      <el-option label="破折线" value="2"></el-option>
                      <el-option label="点线" value="3"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="方向" prop="direction">
                    <el-select
                      v-model.trim="subline_form.direction"
                      placeholder="线型"
                      class="wid70"
                    >
                      <el-option label="横线" value="1"></el-option>
                      <el-option label="竖线" value="2"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="粗细" prop="size">
                    <el-input-number
                      v-model="subline_form.size"
                      :controls="false"
                      :min="0"
                      :max="5"
                      class="wid70"
                    ></el-input-number>
                  </el-form-item>
                  <el-form-item
                    :label="subline_form_direction.text"
                    prop="length"
                  >
                    <el-input-number
                      v-model="subline_form.length"
                      :controls="false"
                      :min="0"
                      :max="subline_form_direction.max"
                      class="wid70"
                    ></el-input-number>
                  </el-form-item>
                  <el-form-item label="" prop="sendTime">
                    <el-button type="primary" @click="addSubline"
                      ><i class="el-icon-plus"></i>添加辅助线</el-button
                    >
                  </el-form-item>
                </el-form>
              </div>
              <div>
                <el-checkbox-group
                  v-model="subline_select_type"
                  @change="sublineSelect"
                >
                  <div
                    v-for="(item, index) in subline_list"
                    :key="item.index"
                    class="checkbox"
                  >
                    <el-checkbox :label="item.index" size="mini"
                      >{{ item.name }}
                    </el-checkbox>
                    <i
                      class="el-icon-delete"
                      @click="deleteSubline(item, index)"
                    ></i>
                  </div>
                </el-checkbox-group>
              </div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// 局部字体设置组件
import FontSet from "@/components/FontSet/FontSet";
// 拖拽组件
import newDrag from "./newDrag";
// 导入默认的选项
import defaultdata from "./data";
// 请求数据
import { get_order_print, save_order_print } from "@/api/global/globalPrint";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";

export default {
  name: "HelloWorld",
  components: {
    FontSet,
    newDrag,
  },
  data() {
    return {
      fontOptions: [10, 11, 12, 13, 14, 15],
      tem_name: "",
      id: this.$route.query.id,
      tem_id: this.$route.query.tem_id,
      loading: false,
      timer: "",
      // 纸张设置
      page: {
        width: 60,
        height: 40,
        topMargin: 0,
        leftMargin: 0,
        isShow: false,
      },

      // 商品信息
      goodsMenuList: [
        {
          id: 1,
          label: "订单号",
          disabled: true,
          top: 0,
          left: 0,
        },
      ],
      goodsMenuList: [
        {
          id: 1,
          label: "订单号",
          disabled: true,
          top: 0,
          left: 0,
        },
      ],
      goodsMenuListProps: [],
      goodsType: [],
      goodsinputVisible: false,
      goodsinputValue: "",
      goodsFontSet: {
        fontSize: "12",
        bold: false,
        underline: false,
        italic: false,
        textAlign: "center",
      },
      // 条码信息
      qrcodeList: [
        {
          index: 1,
          label: "溯源码",
          disabled: true,
          top: 85,
          left: 160,
          width: 15,
          height: 15,
        },
        {
          index: 2,
          label: "分拣条码",
          disabled: true,
          top: 113,
          left: 13,
          width: 35,
          height: 10,
        },
      ],
      qrcodeType: [],

      // 辅助线
      subline_form: {
        line_type: "1", //线型  1实线 2破折线 3点线
        direction: "1", //方向 1横线  2竖线
        size: 0, //粗细
        length: 60, //长度
        top: 0,
        left: 0,
        select: true,
      },
      direction_type: {
        1: "横线",
        2: "竖线",
      },
      subline_index: 0,
      subline_select_type: [],
      subline_list: [],
    };
  },
  computed: {
    subline_form_direction() {
      let form = {
        text: "长",
        max: 60,
      };
      if (this.subline_form.direction == 1) {
        form.text = "长";
        form.max = this.page.width;
        this.subline_form.length = this.page.width;
      } else if (this.subline_form.direction == 2) {
        form.text = "高";
        form.max = this.page.height;
        this.subline_form.length = this.page.height;
      }
      return form;
    },
    // 商品信息
    goodslistProps() {
      return this.sort(this.goodsMenuListProps, this.goodsType);
    },
    qrcodelistProps() {
      return this.sort(this.qrcodeList, this.qrcodeType);
    },
    // 辅助线
    sublineProps() {
      return this.sort(this.subline_list, this.subline_select_type);
    },
  },
  created() {
    this.index();
  },
  methods: {
    // 请求数据
    index() {
      let data = Object.assign(
        apiUrl().name,
        { id: this.id }
      );
      get_order_print(data).then((res) => {
        if (res.errcode == 0) {
          let data = res.list;
          this.tem_name = data.tem_name;
          let main = JSON.parse(data.main_settings);
          let print = JSON.parse(data.print_settings);
          this.page = print;

          // 模板选项数据
          let tempData = JSON.parse(data.tem_type.temp_string);
          this.goodsMenuList = tempData;

          // 调整的模板样式
          this.goodsMenuListProps = main.goodsSetData.goodslist;

          // 选中
          this.goodsType = main.goodsSetData.selectType;
          // 字体设置
          this.goodsFontSet = main.goodsSetData.fontset;
          this.qrcodeType = main.qrcodeData.selectType;
          if (main.qrcodeData.qrcodelist.length) {
            this.qrcodeList.map((e) => {
              main.qrcodeData.qrcodelist.map((p) => {
                if (p.index == e.index) {
                  e.disabled = p.disabled;
                  e.height = p.height;
                  e.left = p.left;
                  e.top = p.top;
                  e.width = p.width;
                }
              });
            });
          }

          // 辅助线
          this.subline_list = main.sublineData.sublinelist;
          this.subline_select_type = main.sublineData.selectType;
          let length = this.subline_list.length;
          if (length) {
            this.subline_index = this.subline_list[length - 1].index + 1;
          }
        }
      });
    },
    // 筛选选中的项
    sort(list, selectList) {
      let arr = [];
      list.map((e) => {
        selectList.map((p) => {
          if (e.index == p) {
            arr.push(e);
          }
        });
      });
      return arr;
    },
    // 选中事件
    selectMethod(val) {
      let newarr = [];
      this.goodsMenuList.map((item) => {
        val.forEach((element) => {
          if (item.index == element) {
            newarr.push(item);
          }
        });
      });
      let diff = [];
      newarr.forEach((data) => {
        if (
          this.goodsMenuListProps.every((meber) => meber.index !== data.index)
        ) {
          diff.push(data);
        }
      });
      this.goodsMenuListProps = this.goodsMenuListProps.concat(diff);
    },
    // 获取fontSET子组件数据
    getdata(data, type) {
      switch (type) {
        case "goods":
          this.goodsFontSet = data;
          break;
      }
    },
    // 保存模板
    saveTemplate() {
      let setting = this.page;
      // 商品信息设置
      let goodsSetData = {
        goodslist: this.$refs.newDrag.goodslist,
        selectType: this.goodsType,
        fontset: this.goodsFontSet,
      };
      let qrcodeData = {
        qrcodelist: this.$refs.newDrag.qrcodelist,
        selectType: this.qrcodeType,
      };
      let sublineData = {
        sublinelist: this.subline_list,
        selectType: this.subline_select_type,
      };

      let allData = {
        goodsSetData: goodsSetData,
        qrcodeData: qrcodeData,
        sublineData: sublineData,
      };

      // return false;
      let data = Object.assign(
        apiUrl().name,
        {
          id: this.id,
          tem_id: this.tem_id,
          print_settings: JSON.stringify(this.page),
          main_settings: JSON.stringify(allData),
          tem_name: this.tem_name,
        }
      );
      save_order_print(data)
        .then((res) => {
          if (res.errcode == 0) {
            this.$message.success("修改模板成功");
            setTimeout(() => {
              window.close();
            }, 1000);
          }
        })
        .catch(() => {
          this.$message.error("修改模板失败");
        });
    },
    // 关闭
    close() {
      window.close();
    },
    // 添加辅助线
    addSubline() {
      if (!this.subline_form.size || !this.subline_form.length) {
        this.$message.error("辅助线粗细和高度不能为0");
        return;
      } else {
        let index = this.subline_index;
        let obj = JSON.parse(JSON.stringify(this.subline_form));
        let arr = [];
        obj.name = this.direction_type[obj.direction] + index;
        obj.index = index;
        this.subline_list.push(obj);
        this.subline_list.map((e) => {
          if (e.select) {
            arr.push(e.index);
          }
        });
        this.subline_form.size = 0;
        this.subline_index += 1;
      }
    },
    // 删除辅助线
    deleteSubline(item, index) {
      this.subline_list.splice(index, 1);
    },
    sublineSelect(val) {
      this.subline_select_type = val;
    },
  },
};
</script>

<style lang="scss" scoped>
$main-color1: #009688; //主体颜色

li {
  list-style: none;
}

// 头部
.el-header {
  height: 60px;
  background-color: $main-color1;
  display: flex;
  align-items: center;

  .title {
    display: block;
    flex: 1;
    font-size: 24px;
    color: #fff;
  }
}

// 主体布局
.el-main {
  display: flex;
  flex-direction: row;
  background-color: #ccc;
  margin: 0;
  padding: 0;

  .left {
    flex: 1;
    height: calc(100vh - 60px);
    overflow: auto;
    display: flex;
    justify-content: center;

    .main {
      margin-top: 100px;
      margin-bottom: 100px;
      position: relative;
      background-color: #fff;
    }
  }

  .right {
    height: calc(100vh - 60px);
    overflow: auto;
    width: 500px;
    background-color: #fff;
    padding-bottom: 50px;
    border-bottom: 1px solid $main-color1;
    box-sizing: border-box;
  }
}

// 右边主体布局
.item-title {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid $main-color1;
  padding: 10px 15px;
  font-size: 16px;
  color: #000;
  font-weight: 700;
}

// 纸张设置
.page {
  padding: 0 20px;

  ul {
    margin-bottom: 15px;

    li {
      display: flex;
      align-items: center;
      margin-top: 15px;

      .page-item-title {
        font-size: 14px;
        color: #333;
        margin-right: 10px;
      }

      .page-item-content {
        flex: 1;
      }

      .template-set {
        padding-left: 30px;
      }
    }
  }
}

// 头部信息
.header-info,
.main-info,
.footer-info {
  padding: 0 20px;

  div {
    &:first-child {
      .el-checkbox {
        margin-right: 5px;
        margin-left: 5px;
        margin-top: 8px;
      }
    }
  }
}
.footer—info-defind,
.main—info-defind {
  padding: 5px 0;
  margin-left: 5px;
  .el-tag {
    display: block;
    width: 300px;
    margin-bottom: 5px;
  }
}

// 主体部分信息
.guide-line {
  margin-top: 10px;

  .item {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin-bottom: 10px;

    .guide-line-title {
      font-size: 16px;
    }

    .item-content {
      display: flex;
      flex-direction: row;
      align-content: center;

      .input-box {
        display: flex;
        align-content: center;

        span {
          display: inline-block;
          padding: 2px 0px 2px 3px;
          border-radius: 0 5px 5px 0;
          height: 30px;
          line-height: 26px;
          box-sizing: border-box;
          width: 40px;
          border: 1px solid #cccccc;
          font-size: 14px;
          background-color: #ccc;
        }

        input[type="number"] {
          margin-left: 15px;
          padding: 2px 0px 2px 13px;
          border-radius: 5px 0 0 5px;
          height: 30px;
          box-sizing: border-box;
          width: 70px;
          border: 1px solid #cccccc;

          &:focus {
            outline: none;
          }
        }
      }
    }

    select {
      padding: 2px 3px;
      border-radius: 5px;
      height: 30px;
      box-sizing: border-box;
      border-style: none;
      border: 1px solid #cccccc;

      &:hover {
        border: 1px solid $main-color1;
      }

      &:focus {
        outline: none;
      }
    }
  }
}

// 自定义字段信息
.user-defind {
  padding: 10px 20px;
  margin-bottom: 50px;

  .el-tag {
    display: block;
    width: 300px;
    margin-bottom: 15px;
  }
}
.button {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  padding-top: 15px;
  .el-button {
    width: 110px;
    height: 40px;
    font-size: 18px;
  }
}

.subline_form {
  padding-top: 8px;
  /deep/.el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 8px;
  }
  /deep/.el-input-number--small {
    width: auto;
  }
  /deep/ .el-input-number {
    width: auto;
  }
}
/deep/ .el-checkbox-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .checkbox {
    i {
      font-size: 16px;
      color: red;
      margin: 0 8px 0 5px;
      cursor: pointer;
    }
  }
}
</style>
